<template>
    <div>
        <h3>房型显示</h3>
        <input type="text" v-model="can.name">
        <input type="button" value="查询" class="btn btn-primary" @click="cha">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>单价(元)</td>
                    <td>室内面积(平方米)</td>
                    <td>最多入住人数</td>
                    <td>图片</td>
                    <td>房型描述</td>
                    <td>是否有窗</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{ item.Price }}</td>
                    <td>{{ item.Aera }}</td>
                    <td>{{ item.Count }}</td>
                    <td>
                        <img :src="item.Photo" width="150" height="100">
                    </td>
                    <td>{{ item.Desc }}</td>
                    <td>{{ item.IsWindow == 1 ? "有窗" : "无窗" }}</td>
                    <td>
                        <input type="button" value="修改" @click="upd(item.Id)" class="btn btn-primary">
                        <input type="button" value="删除" @click="del(item.Id)" class="btn btn-danger">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共<b>{{ data.totalCount }}</b>条,</span>
        <span>每页<b>{{ can.pageSize }}</b>条,</span>
        <span>共<b>{{ can.pageIndex }}/{{ data.totalPage }}</b>页</span>

        <input type="button" value="首页" @click="gopage(1)" class="btn btn-link">
        <input type="button" value="上一页" @click="gopage(can.pageIndex - 1)" class="btn btn-link">
        <span v-for="item in data.totalPage" @click="gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="gopage(can.pageIndex + 1)" class="btn btn-link">
        <input type="button" value="尾页" @click="gopage(data.totalPage)" class="btn btn-link">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0,
})
let can: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    name: ""
})
onMounted(() => {
    getHouseType();
})

const upd = (id: any) => {
    router.push({
        path:'/housetypeupd',
        query:{
            id:id
        }
    })
}
const del = (id: any) => {
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/House/DelHousezType",
            params: {
                id: id
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('删除成功');
                    getHouseType();
                }
            })
    }

}
//查询
const cha = () => {
    can.pageIndex = 1;
    getHouseType();
}

//翻页
const gopage = (num: any) => {
    if (num < 1) {
        can.pageIndex = 1
        return;
    }
    if (num > data.totalPage) {
        can.pageIndex = data.totalPage
        return;
    }
    can.pageIndex = num;
    getHouseType();
    return;
}

const getHouseType = () => {
    axios({
        method: "get",
        url: "/api/House/ShowHouseType",
        params: can
    })
        .then(res => {
            data.list = res.data.list,
                data.totalCount = res.data.totalCount,
                data.totalPage = res.data.totalPage
        })
}

</script>









<style scoped>
b {
    color: red;
}

span {
    margin: 0 7px;
}
</style>